<template>
	<view class="step">
		
		<view class="step_box" >
			
			<!-- 左侧进度线 -->
			<view class="step_left">
			</view>
			
			<view class="step_right">
				<view  v-for="(item,index) in stepData" :key="index" >
				<view class="comment_pop_stype"  :class="{poped:getShowFlag(item.orderStatus)}">
					<view class="triangle"></view>
					<view class="comment_pop_stype_content">
						<view  class="pop_item_s">
						
							<view style="font-size: 18rpx">
								订单状态：<input style="display: inline-block; font-size: 17rpx;  height: 25rpx;" v-model="item.orderStatus" disabled="true"/>
							</view>
							<view style="font-size: 18rpx">
								执行人：<input style="display: inline-block; font-size: 17rpx;  height: 25rpx;" v-model="item.executor" disabled="true"/>
								
							</view >
							<view style="font-size: 18rpx">
								是否延期：
								<input style="display: inline-block; font-size: 17rpx;  height: 25rpx;" v-model="item.delayed" disabled="true"/>
							</view>
							<view style="font-size: 18rpx">
								完成状态：<input style="display: inline-block; font-size: 17rpx;  height: 25rpx;" v-model="item.finishStatus" disabled="true"/>
							
								
							</view>
							<view style="font-size: 18rpx">
								开始时间：<input style="display: inline-block; font-size: 17rpx;  height: 25rpx;" v-model="item.sendingTime" disabled="true"/>
								
							</view>
							<view style="font-size: 18rpx" v-if="item.expectFinishTime">
								<view >预期完成时间：<input  style="display: inline-block; font-size: 17rpx;  height: 25rpx;" v-model="item.expectFinishTime" disabled="true"/></view>
								
							</view>
							<view style="font-size: 18rpx">
								实际完成时间：<input style="display: inline-block; font-size: 17rpx; height: 25rpx; " v-model="item.finishTime" disabled="true"/>
								
								
							</view>
							<view style="font-size: 18rpx" v-if="item.comment">
								备注：<input style="display: inline-block; font-size: 17rpx; height: 25rpx; " v-model="item.comment" disabled="true"/>
								
								
							</view>
							<view style="margin: 30rpx;">
							<button @click = "getpic(item.statusId)" style="background-color: #f1f1f6; color: #919192;  height: 50rpx;  font-size: 17rpx;" >查看该状态图片</button>
							</view>
							<button @click = "showTag(item.orderStatus)" style="background-color: crimson; color: #fff;  height: 50rpx;  font-size: 17rpx;" >关闭</button>
						</view>
					</view>
				
					
				
				</view>
				
				
				
				
				</view>
				
				<view class="right_content"  v-for="(item,index) in stepData" :key="index" @click="showTag(item.orderStatus)">
					<!-- 详情弹窗 -->
					
					
				
					<!-- 进度名称 -->
						<view>
						<block v-if="item.finishStatus === '未完成'" >
							<p class="title" :style="{color:item.type === 1? '#202020':'#999'}">{{item.orderStatus}}</p>
						</block>
						<block v-if="item.finishStatus === '已完成'" >
							<p class="title" :style="{color:item.type === 1? colors:'#999'}">{{item.orderStatus}}</p>
						</block>
						<block v-if="item.finishStatus === '执行中'" >
							<p class="title" :style="{color:item.type === 1? colors:'#999'}">{{item.orderStatus}}</p>
						</block>
						<!-- 进度时间 -->
						
						<view class="times" v-if="item.finishStatus === '执行中'">开始时间：{{item.acceptTime}}</view>
						
						<view style="display: flex;">
						<view class="times" v-if="item.finishStatus === '已完成'">完成时间：{{item.finishTime}}</view>
						<view class="times" v-if="item.finishStatus === '已完成'">开始时间：{{item.acceptTime}}</view>
						
						</view>
						
						<!-- 进度详情备注 -->
						<view class="show" v-for="(item,index) in stepData" :key="index" :class="close">
								
						</view>
							
						<!-- 右侧的进度点 -->
						<view class="status"  v-if="item.finishStatus === '执行中'"  
							:style="{background: item.delayed == '正常'?colors:'#ff0000',borderColor: item.delayed == '正常'?colors:'#ff0000'}"  @click = "showTag(item.orderStatus)"><view style="margin-top: 12rpx;">{{item.delayed == '正常'?"!":'!'}}</view>
						</view>
						<view class="status"  v-if="item.finishStatus === '已完成'"  
							:style="{background: item.delayed == '正常'?colors:'#ff0000',borderColor: item.delayed == '正常'?colors:'#ff0000'}" @click = "showTag(item.orderStatus)"><view style="margin-top: 12rpx;">{{item.delayed == '正常'?"✓":'✓'}}</view>
						</view>
						<view class="status"  v-if="item.finishStatus === '未完成'"  
							style="background: #999,borderColor:#999" @click = "showTag(item.orderStatus)"><view style="margin-top: 12rpx;">✓</view>
						</view>
						
						</view>
					
					
					</view>
					
					
					
					
					
				</view>
			
			
		</view>
		<view class="mark"  v-show="isshow"></view>
	</view>
	
	
	<!-- 流程图详情弹出层 -->
		
	
		
		
		
	
	
	
	
</template>


<script>



	export default {
		
		data() {
		
			return {
			pictures:[],
			isshow: false,	
			flags: [],
			isflag: true,
			   };
			
		},
		props: {
			colors: {
				type: String
			},
			stepData: {
				type: Array
			}
		},
		methods: {
			

			jumpNext(item) {
				
				this.$emit("itemClick",item);
			},
			showTag(e){
						 this.isshow = !this.isshow
						  let flag =  this.getShowFlag(e)
						  
						  if(flag == true){
							  //
							  this.flags[e]=false;
							  
						
						  }else{
							  this.flags[e]=true;
							 
						  }
						  
						  //强制刷新
						this.$forceUpdate()
			
						  
						if(this.isflag == false){
							console.log("aaa");
							
							
						}	
							
						}, 
						getShowFlag(id){
							
							console.log("id"+id)
							
							//如果没有定义，就不显示
							if(this.flags[id]!=undefined&&this.flags[id]==true){
								
						         this.flags[id] = true;
						         return true;
							}else{
								  this.flags[id] = false;
							
								return false;
							}
						},
						getpic(e){
							
							this.$u.api.order.getpic({statusId:e}).then((res)=>{
								
								console.log(res)
								if (res.list.length === 0) {
									uni.showToast({
									  title: '该状态没有图片可以查看', 
									  icon: 'none', 
									  duration: 3000, 
									  mask: false, 
									  position: 'middle', 
									 
									});
									this.pictures = res.list;
								}else{
									this.pictures = res.list;
									uni.previewImage({
									      urls: this.pictures,
									      current: this.pictures[0] // 默认显示第一张图片
									    });
								}
								
								
							})
						}
			
		}
	};
</script>


<style lang="scss" scoped>
	.step {
		padding: 40rpx 20rpx;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
	}
	
	
	
	
	
	.step_box {
		margin: 0 2rpx;
		margin-left: 20rpx;
		display: flex;
		margin-bottom: 20rpx;
		
		
		.step_left {
			width: 2rpx;
			display: block;
			background-color: #DDDDDD;
			overflow: hidden;
		}

		.step_right {
			margin-left: 25rpx;
			margin-top: 0rpx;

			.right_content {
				height: 48rpx;
				position: relative;
				margin-bottom: 13rpx;

				.title {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					
				}

				.times {
					width: 345rpx;
					float: right;
					font-size: 16rpx;
					font-family: Source Han Sans CN;
					font-weight: 200;
					color: #999999;
					line-height: 12rpx;
				}

				.status {
					margin-left: 2rpx;
					margin-top: -4rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					position: absolute;
					top: 10rpx;
					background-color: #ccc;
					left: -66rpx;
					color: white;
					line-height: 9rpx;
					font-size: 18px;
					text-align: center;
				}

				.result {
					padding: 10upx 15upx;
					background-color: #F6F6F6;
					font-size: 22upx;
					margin-top: 10upx;
					border: 1upx dashed #ddd;
				}

				&:last-of-type {
					margin-bottom: 0;

					.status {
						top: 14upx;
					}

					&::before {
						content: '';
						width: 6upx;
						height: 100%;
						background-color: #FFFFFF;
						position: absolute;
						top: 22upx;
						left: -24upx;
					}
				}
			}
		}
	}
	
	
	
	.comment_pop_stype {
		display: none;
		height: 270rpx;
		width: 800rpx;
		position: relative;
		
	}
	.poped{
		display: block;
		height: 410rpx;
		width: 700rpx;
		position: relative;
	}
	.comment_pop_stype_content {
		position: absolute;
		height: 400rpx;
		width: 700rpx;
		top: 0;
		left: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.triangle {
		position: absolute;
		height: 30rpx;
		width: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
		transform: rotateZ(45deg);
		bottom: 0;
		left: 120rpx;
	}
	
	.pop_item_s {
		flex: 1;
		height: 400rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.marked{
	   	 display: none;
	   	position:absolute;
	   	height: 820rpx; 
	   	color: #fff;
	   	background: rgba(0, 0, 0, 0.5); 
	   	left: 0%;
	   	right: 0%;
	   	margin-top: -990rpx;
	   	font-size: 26rpx;
	   	text-align: center;
	
	   
	   }
	
	.mark{
	   
	   	position:absolute;
	   	height: 820rpx; 
	   	color: #fff;
	   	background: rgba(0, 0, 0, 0.5); 
	   	left: 0%;
	   	right: 0%;
	   	margin-top: -990rpx;
	   	font-size: 26rpx;
	   	text-align: center;
	
	   
	   }
</style>